<template>
	<view
		class="df jsc ac bd-bottom-e sev-tab-bg"
		v-if="tabData && tabData.length > 0"
	>
		<view
			class="f38 sev-tag"
			v-for="(item, index) in tabData"
			:key="index"
			:class="value === item.value ? 'sev-tag-active' : ''"
			@tap="changeTab(item.value)"
		>
			{{ item.text }}
		</view>
	</view>
</template>

<script>
export default {
	emits: ['click'],
	props: {
		tabData: {
			type: Array,
			default() {
				return []
			},
		},
		value: {
			type: [Number, String],
			default: 0,
		},
	},
	data() {
		return {
			tabActive: 0,
		}
	},
	mounted() {
		this.tabActive = this.value
	},
	methods: {
		changeTab(val) {
			this.$emit('click', val)
		},
	},
	watch: {
		value(val) {
			if (val) {
				this.tabActive = val
			} else {
				this.tabActive = 0
			}
		},
	},
}
</script>

<style scoped lang="scss">
.sev-tab-bg {
	background-color: #f6f7fc;
	border-radius: 13rpx;
	overflow: hidden;
	height: 80rpx;
	padding: 5rpx;
	overflow: hidden;
	display: flex;
	justify-content: space-between;
	justify-items: center;
	border: none;
}
.sev-tag {
	flex: 1;
	text-align: center;
	height: 80rpx;
	line-height: 80rpx;
}

.sev-tag-active {
	background-color: $primary-color;
	color: #ffffff;
	border-radius: 8rpx;
	box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.1);
}
</style>
